<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>订票申请书</title>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script type="text/html" id="addTravelText" th:inline="javascript">
        <fieldset class="layui-elem-field" style="margin-top: 20px;">
            <legend>旅程</legend>
            <div class="layui-form-item">
                <label class="layui-form-label">交通工具</label>
                <div class="layui-input-inline">
                    <select class="transportType" lay-filter="transportType" name="" lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option th:each="transportType:${transportType}" th:value="${transportType.key}" th:text="${transportType.value}"></option>
                    </select>
                </div>
                <label class="layui-form-label">出发时间</label>
                <div class="layui-input-inline">
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off"  class="layui-input startTime" lay-verify="required" placeholder="yyyy-MM-dd">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出发地</label>
                <div class="layui-input-inline">
                    <select class="startLocation" lay-filter="startLocation"  lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option th:each="city:${allCity}" th:value="${city.code}" th:text="${city.name}"></option>
                    </select>
                </div>
                <label class="layui-form-label">目的地</label>
                <div class="layui-input-inline">
                    <select class="endLocation" lay-filter="endLocation" lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option th:each="city:${allCity}" th:value="${city.code}" th:text="${city.name}"></option>
                    </select>
                </div>

            </div>
            <fieldset class="layui-elem-field peopleText" style="margin: 20px;"  >
                <legend>乘客</legend>
                <div class="layui-form-item passengerText"  th:each="travelpeople:${applicationMembers}">
                    <label class="layui-form-label">乘客</label>
                    <div class="layui-input-inline">
                        <input th:value="${travelpeople.staff.name}" type="text" readonly="readonly" autocomplete="off" class="layui-input" >
                        <input class="passengerNameId" th:value="${travelpeople.staff.id}" type="hidden">
                    </div>
                    <label class="layui-form-label">身份证</label>
                    <div class="layui-input-inline">
                        <input th:value="${travelpeople.staff.card}"  type="text" readonly="readonly" autocomplete="off" class="layui-input passengerCard" >
                    </div>
                    <label class="layui-form-label">坐席</label>
                    <div class="layui-input-inline">
                        <select class="seatclass"  lay-filter=" "  lay-verify="required" lay-search="">
                            <option value="">直接选择或搜索选择</option>
                        </select>
                    </div>
                    <input type="hidden" class="transportTypeId" name="" value="">
                    <input type="hidden" class="startTimehid" name="" value="">
                    <input type="hidden" class="endLocationhid" name="" value="">
                    <input type="hidden" class="startLocationhid" name="" value="">
                </div>
            </fieldset>

        </fieldset>
    </script>
    <script type="text/html" id="airplaneSeat" th:inline="javascript">
        <option th:each="airplaneSeat:${airplaneSeat}" th:value="${airplaneSeat.key}" th:text="${airplaneSeat.value}"/>
    </script>
    <script type="text/html" id="trainSeat" th:inline="javascript">
        <option th:each="airplaneSeat:${trainSeat}" th:value="${airplaneSeat.key}" th:text="${airplaneSeat.value}"/>

    </script>
    <script type="text/html" id="highspeedTrainSeat" th:inline="javascript">
        <option th:each="airplaneSeat:${highspeedTrainSeat}" th:value="${airplaneSeat.key}" th:text="${airplaneSeat.value}"/>

    </script>
    <script type="text/html" id="busSeat" th:inline="javascript">
        <option th:each="airplaneSeat:${busSeat}" th:value="${airplaneSeat.key}" th:text="${airplaneSeat.value}"/>

    </script>
    <script th:inline="javascript">
        layui.use(['layer' ,'form', 'layedit', 'laydate', 'jquery'], function(){
            var form = layui.form
                ,layer = layui.layer
                ,laydate = layui.laydate
                ,$ = layui.jquery;

            //监听提交
            form.on('submit(demo1)', function(data){
                $.ajax({
                    url:'/management/submitTicketApplication'
                    ,data:data.field
                    ,success:function(){
                        layer.msg('提交成功');
                        window.location = '/management/table-TicketApplications';
                    },
                })
                return false;
            });

            //选择交通工具事件
            form.on('select(transportType)', function (data) {
                $(this).parents("fieldset").find("select.seatclass").empty();
                $(this).parents("fieldset").find(".transportTypeId").val(data.value);
                if (data.value == 1){
                    $(this).parents("fieldset").find("select.seatclass").html($("#airplaneSeat").html())
                }
                if (data.value == 2){
                    $(this).parents("fieldset").find("select.seatclass").html($("#trainSeat").html())
                }
                if (data.value == 3){
                    $(this).parents("fieldset").find("select.seatclass").html($("#highspeedTrainSeat").html())
                }
                if (data.value == 4){
                    $(this).parents("fieldset").find("select.seatclass").html($("#busSeat").html())
                }

                form.render('select');
            })

            form.on('select(startLocation)', function (data) {
                $(this).parents("fieldset").find(".startLocationhid").val(data.value);
            })
            form.on('select(endLocation)', function (data) {
                $(this).parents("fieldset").find(".endLocationhid").val(data.value);
            })

            //添加旅程
            $("#addTravel").on("click",function () {
                tripNum = 0;

                //旅程的代码块
                $($("#addTravelText").html()).insertBefore($(this));
                $(".passengerText").each(function () {
                    $(this).find(".transportTypeId").attr("name","ticketApplicationDetails["+tripNum+"].transportTypeId");
                    $(this).find(".startTimehid").attr("name","ticketApplicationDetails["+tripNum+"].startTime");
                    $(this).find(".startLocationhid").attr("name","ticketApplicationDetails["+tripNum+"].startLocation.code");
                    $(this).find(".endLocationhid").attr("name","ticketApplicationDetails["+tripNum+"].endLocation.code");
                    $(this).find(".passengerNameId").attr("name","ticketApplicationDetails["+tripNum+"].staff.id");
                    $(this).find(".seatclass").attr("name","ticketApplicationDetails["+tripNum+"].transportSeatLevelId");
                    tripNum++;
                })
                //循环渲染时间选择器
                $(".startTime").each(function () {
                    var thisTime = $(this)
                    laydate.render({
                        elem: this
                        ,min:getNowFormatDate()
                        //回调函数
                        ,done: function(value, date, endDate){
                            thisTime.parents("fieldset").find(".startTimehid").val(value);

                        }
                    });
                })
                form.render();
            })


        });
        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month
                + seperator1 + strDate + " " + date.getHours() + seperator2
                + date.getMinutes() + seperator2 + date.getSeconds();
            return currentdate;
        }
    </script>
</head>
<body>
<button class="layui-btn layui-btn-sm" style="position: fixed" onClick="javascript :history.back(-1);">返回</button>
<div style="margin: auto; width: 1000px"><br><br>
    <h1>订票申请</h1>
    <form class="layui-form" action="" method="post">
        <fieldset class="layui-elem-field" style="margin-top: 20px;">
            <legend>基本信息</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">申请人</label>
                    <div class="layui-input-inline">
                        <input lay-verify="required" type="text" readonly="readonly" autocomplete="off" class="layui-input" th:value="${session.user.name}">
                        <input type="hidden" th:value="${session.user.id}" name="staff.id" id="applicating_staff">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">项目类型</label>
                    <!--暂时是写死的，因为只有出差类型-->
                    <div class="layui-input-inline">
                        <input lay-verify="required" type="text" readonly="readonly" autocomplete="off" class="layui-input" th:value="出差项目">
                        <input type="hidden" th:value="1" name="applicationType">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">项目名称</label>
                    <div class="layui-input-inline">
                        <input lay-verify="required" type="text" readonly="readonly" autocomplete="off" class="layui-input" th:value="|${applicationBasicInfo.numbering}/${applicationBasicInfo.staff.name}/${applicationBasicInfo.supplier.name}|">
                        <input type="hidden" th:value="${applicationBasicInfo.id}" name="applicationId">
                    </div>
                </div>
            </div>
        </fieldset>
        <button id="addTravel" type="button" class="layui-btn">添加旅程</button>
        <fieldset class="layui-elem-field" style="margin-top: 20px;">
            <legend>备注</legend>
            <div class="layui-form-item">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label"> </label>
                    <div class="layui-input-block">
                        <textarea lay-reqtext="请输入其他要求，例如:夜间，靠窗等" lay-verify="required" name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
        </fieldset>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button style="margin-left: 600px" type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>